<template>
  <div class="app-main">
    <drawer
      width="200px;"
      :show.sync="drawerVisibility"
      :show-mode="showModeValue"
      :placement="showPlacementValue"
      :drawer-style="{'background-color':'#3A3C41', width: '200px'}"
    >
      <!-- drawer content 右边 -->
      <div slot="drawer">
        <ul class="menu-mi">
          <li class="userpart">
            <p>
              <img src="./assets/images/user.png" alt>
            </p>
            <h1>用户名</h1>
            <a @click="logout" class="dlout">退出登录</a>
            <!-- <router-link to="#" @click.native="drawerVisibility = false" class="dlout">退出登录</router-link> -->
          </li>
          <li class="on">
            <router-link to="/" @click.native="drawerVisibility = false">
              <span>首页</span>
            </router-link>
          </li>
          <li>
            <router-link to="/User" @click.native="drawerVisibility = false">
              <span>个人中心</span>
            </router-link>
          </li>
          <li>
            <router-link to="/Service" @click.native="drawerVisibility = false">
              <span>技术服务</span>
            </router-link>
          </li>
          <li>
            <router-link to="/Check" @click.native="drawerVisibility = false">
              <span>信息查询</span>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- drawer content 右边end -->
      <!-- main content -->
      <view-box ref="viewBox" body-padding-bottom="66px" v-bind:class="{'no-footer' : !hasFooter}">
        <!-- main header content -->
        <x-header :left-options="{showBack: false}" @on-click-more="onClickMore">
          <span>
            <img
              src="./assets/images/logo.png"
              style="max-width:95%;max-height:100%;padding-left:10px;"
            >
          </span>
          <x-icon
            slot="right"
            type="navicon"
            size="40"
            style="fill:#fff;position:relative;top:-15px;left:5px;"
            @click="drawerVisibility = !drawerVisibility"
            v-show="isLogined"
          ></x-icon>
        </x-header>
        <!-- main header content end -->
        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition>
          <!-- main body content -->
          <router-view class="router-view"></router-view>
          <!-- main body content end -->
        </transition>

        <!-- </tabbar> -->
      </view-box>
      <!-- main content end -->
    </drawer>

    <!-- main footer content -->
    <v-footer v-show="hasFooter"></v-footer>
    <!-- main footer content end -->
  </div>
</template>


<script>
import {
  Radio,
  Group,
  Cell,
  Badge,
  Drawer,
  Actionsheet,
  ButtonTab,
  ButtonTabItem,
  ViewBox,
  XHeader,
  Tabbar,
  TabbarItem,
  Loading,
  TransferDom,
  cookie
} from "vux";
import { mapState, mapActions } from "vuex";

export default {
  directives: {
    TransferDom
  },
  data() {
    return {
      entryUrl: document.location.href,
      showMenu: false,
      menus: {
        "language.noop": '<span class="menu-title">Language</span>',
        "zh-CN": "中文",
        en: "English"
      },
      drawerVisibility: false,
      showMode: "push",
      showModeValue: "push",
      showPlacement: "right",
      showPlacementValue: "right",
      isLogined: false,
      hasFooter: false
    };
  },
  components: {
    Radio,
    Group,
    Cell,
    Badge,
    Drawer,
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading,
    Actionsheet
  },
  watch: {
    $route(to, from) {
      if (
        to.path === "/" ||
        to.path === "/Home" ||
        to.path === "/Login" ||
        to.path === "Register"
      ) {
        this.hasFooter = false;
      } else {
        this.hasFooter = true;
      }
      this.checkLogin();
    }
  },
  methods: {
    onShowModeChange(val) {
      /** hide drawer before changing showMode **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showModeValue = val;
      }, 400);
    },
    onPlacementChange(val) {
      /** hide drawer before changing position **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showPlacementValue = val;
      }, 400);
    },
    onClickMore() {
      this.showMenu = true;
    },
    changeLocale(locale) {
      this.$i18n.set(locale);
      this.$locale.set(locale);
    },
    logout() {
      this.$http({
        url: "/users/logOut"
      })
        .then(resp => {
          // console.info("resp----", resp);
          if (resp.code === 200) {
            cookie.remove("userinfo");
            this.drawerVisibility = false;
            this.$router.replace("/Home");
          } else {
            this.$vux.toast.text(resp.message);
          }
        })
        .catch(() => {
          this.$vux.toast.text("退出登录失败");
        });
    },
    checkLogin() {
      let userInfo = cookie.get("userinfo");
      userInfo = userInfo ? JSON.parse(userInfo) : {};
      this.isLogined = !!userInfo.token;
    },

    ...mapActions(["updateDemoPosition"])
  },
  computed: {
    ...mapState({
      route: state => state.route
    })
  },
  beforeMount() {
    this.checkLogin();
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/reset.less";
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/tap.less";
body {
  background-color: #f3f4f6;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  top: 0;
  bottom: 0;
  // padding-bottom: 66px;
}
html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.demo-icon-22 {
  font-family: "vux-demo";
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #f70968;
}
.vux-demo-tabbar
  .weui-tabbar_item.weui-bar__item_on
  .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #f70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0 !important;
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: "vux-demo"; /* project id 70323 */
  src: url("//at.alicdn.com/t/font_70323_wlronpvr565yiudi.eot");
  src: url("//at.alicdn.com/t/font_70323_wlronpvr565yiudi.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_70323_wlronpvr565yiudi.woff") format("woff"),
    url("//at.alicdn.com/t/font_70323_wlronpvr565yiudi.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_70323_wlronpvr565yiudi.svg#iconfont")
      format("svg");
}
.demo-icon {
  font-family: "vux-demo";
  font-size: 20px;
  color: #04be02;
}
.demo-icon-big {
  font-size: 28px;
}
.demo-icon:before {
  content: attr(icon);
}
.router-view {
  width: 100%;
  // top: 46px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 58px;
  // padding-bottom: 80px;
  box-sizing: border-box;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 500ms;
  height: 100%;
  top: 46px;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.menu-title {
  color: #888;
}

.vux-header {
  overflow: hidden;
  background-color: #2d82ec !important;
  padding: 0px 0 !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
}
.vux-header .vux-header-title {
  text-align: left !important;
}
.vux-header .vux-header-title {
  margin-left: 0 !important;
  height: 58px !important;
}
.vux-header .vux-header-title > span {
  width: 100%;
  height: 58px !important;
  padding: 8px 0 0;

  display: -webkit-box !important;
  display: -moz-box !important;
  display: box !important;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-box-pack: left;
  -moz-box-pack: left;
  box-pack: left;
}
.vux-header .vux-header-right {
  top: 24px !important;
}
.app-main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  // padding-bottom: 70px;
}
.no-footer {
  & > div {
    padding-bottom: 0 !important;
  }
}
</style>
